<template>
  <div>
    <!--上传图片-->
    <ma-image-upload v-if="props.type === 'image'" v-model="file" />
    <!--上传文件-->
    <ma-file-upload v-if="props.type === 'file'" v-model="file" />
  </div>
</template>
<script setup>
import { Message } from "@arco-design/web-vue";
import MaImageUpload from "./components/image-upload.vue";
import MaFileUpload from "./components/file-upload.vue";
import { storageMode } from "@/config/upload";

const emit = defineEmits(["update:modelValue"]);
const file = ref();
const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: () => {}
  },
  title: { type: String, default: "buttonText" }, // 上传按钮显示文字
  icon: { type: String, default: "icon-plus" }, // 上传按钮图标
  rounded: { type: Boolean, default: false }, // 上传按钮是否圆角
  multiple: { type: Boolean, default: false }, // 是否支持多文件上传
  disabled: { type: Boolean, default: false }, // 是否禁用
  draggable: { type: Boolean, default: false }, // 是否支持拖拽上传
  size: { type: Number, default: 4 * 1024 * 1024 }, // 单文件大小限制
  chunk: { type: Boolean, default: false }, // 是否分片上传
  chunkSize: { type: Number, default: 1024 * 1024 }, // 分片大小
  limit: { type: Number, default: 0 }, // 分片数量限制
  tip: { type: String, default: undefined }, // 提示信息
  type: { type: String, default: "image" }, // 上传类型 image, file
  accept: { type: String, default: "*" }, // mimeType上传类型
  returnType: { type: String, default: "url" }, // 返回值类型
  fileType: { type: String, default: "button" }, // 上传文件显示方式
  showList: { type: Boolean, default: true }, // 是否显示已上传列表
  requestData: { type: Object, default: {} } // 请求参数 可加入附加业务ID
});

if (!["id", "url"].includes(props.returnType)) {
  Message.error("MaUpload组件props的returnType只能为：id, url 其中一个");
  console.error("MaUpload组件props的returnType只能为：id, url 其中一个");
}

watch(
  () => props.modelValue,
  val => {
    file.value = val;
  },
  {
    deep: true,
    immediate: true
  }
);

provide("storageMode", storageMode);
provide("config", props);

watch(
  () => file.value,
  vl => emit("update:modelValue", vl)
);
</script>
